<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>04.React16_4整理-Redux开篇.md | aiyoudiao</title>
    <meta name="generator" content="VuePress 1.9.10" />
    <link rel="icon" href="/img/blog.ico">
    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script> <meta name="description" content="码二~">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,gitee,markdown">
    <meta name="theme-color" content="#11a8cd">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="preload" href="/assets/css/0.styles.146197cf.css" as="style"><link rel="preload" href="/assets/js/app.bd2fbc77.js" as="script"><link rel="preload" href="/assets/js/3.72c9c947.js" as="script"><link rel="preload" href="/assets/js/113.4e908557.js" as="script"><link rel="preload" href="/assets/js/42.4251ca36.js" as="script"><link rel="prefetch" href="/assets/js/1.4ed4671d.js"><link rel="prefetch" href="/assets/js/10.bd6ddb58.js"><link rel="prefetch" href="/assets/js/100.20d2348f.js"><link rel="prefetch" href="/assets/js/101.ba7b784c.js"><link rel="prefetch" href="/assets/js/102.c3e2dcae.js"><link rel="prefetch" href="/assets/js/103.0f4c50f3.js"><link rel="prefetch" href="/assets/js/104.ef47a111.js"><link rel="prefetch" href="/assets/js/105.2e00f516.js"><link rel="prefetch" href="/assets/js/106.b50e19b9.js"><link rel="prefetch" href="/assets/js/107.e125a8f6.js"><link rel="prefetch" href="/assets/js/108.770493ab.js"><link rel="prefetch" href="/assets/js/109.74766d7b.js"><link rel="prefetch" href="/assets/js/11.f786a5ee.js"><link rel="prefetch" href="/assets/js/110.0b0ee5b4.js"><link rel="prefetch" href="/assets/js/111.835b0e44.js"><link rel="prefetch" href="/assets/js/112.352fa217.js"><link rel="prefetch" href="/assets/js/114.7b77996d.js"><link rel="prefetch" href="/assets/js/115.bdc61268.js"><link rel="prefetch" href="/assets/js/116.d5da9b8b.js"><link rel="prefetch" href="/assets/js/117.35ab1f9f.js"><link rel="prefetch" href="/assets/js/118.517c151d.js"><link rel="prefetch" href="/assets/js/119.f7f49ba8.js"><link rel="prefetch" href="/assets/js/12.3c729a65.js"><link rel="prefetch" href="/assets/js/120.b559598b.js"><link rel="prefetch" href="/assets/js/121.bf8a2f43.js"><link rel="prefetch" href="/assets/js/122.11a0bc97.js"><link rel="prefetch" href="/assets/js/123.2bafdde7.js"><link rel="prefetch" href="/assets/js/124.dc393688.js"><link rel="prefetch" href="/assets/js/125.ed3f389a.js"><link rel="prefetch" href="/assets/js/126.8fd9a57d.js"><link rel="prefetch" href="/assets/js/127.3bf2a1f2.js"><link rel="prefetch" href="/assets/js/128.b9c671d3.js"><link rel="prefetch" href="/assets/js/129.5d331f0d.js"><link rel="prefetch" href="/assets/js/13.7b1a1fe5.js"><link rel="prefetch" href="/assets/js/130.53e4f9c6.js"><link rel="prefetch" href="/assets/js/131.dcc47e1d.js"><link rel="prefetch" href="/assets/js/132.692dcdcd.js"><link rel="prefetch" href="/assets/js/133.e293202c.js"><link rel="prefetch" href="/assets/js/134.593dccf2.js"><link rel="prefetch" href="/assets/js/135.d76d384b.js"><link rel="prefetch" href="/assets/js/136.a519c23c.js"><link rel="prefetch" href="/assets/js/137.b1821288.js"><link rel="prefetch" href="/assets/js/138.5bcea4ef.js"><link rel="prefetch" href="/assets/js/139.076664b0.js"><link rel="prefetch" href="/assets/js/14.35f257b2.js"><link rel="prefetch" href="/assets/js/140.a019e655.js"><link rel="prefetch" href="/assets/js/141.1f70e1c7.js"><link rel="prefetch" href="/assets/js/142.5ed728fd.js"><link rel="prefetch" href="/assets/js/143.1c8cdc78.js"><link rel="prefetch" href="/assets/js/144.b0cb125b.js"><link rel="prefetch" href="/assets/js/145.c0209a76.js"><link rel="prefetch" href="/assets/js/146.551469f4.js"><link rel="prefetch" href="/assets/js/147.1dfd721d.js"><link rel="prefetch" href="/assets/js/148.91d07ef5.js"><link rel="prefetch" href="/assets/js/149.5b88b710.js"><link rel="prefetch" href="/assets/js/15.23bbc29a.js"><link rel="prefetch" href="/assets/js/150.8301107f.js"><link rel="prefetch" href="/assets/js/151.867da089.js"><link rel="prefetch" href="/assets/js/152.935d5046.js"><link rel="prefetch" href="/assets/js/153.f39d8435.js"><link rel="prefetch" href="/assets/js/154.6b9eb2c3.js"><link rel="prefetch" href="/assets/js/155.14283ad4.js"><link rel="prefetch" href="/assets/js/156.2d7c1a2a.js"><link rel="prefetch" href="/assets/js/157.2f28d02f.js"><link rel="prefetch" href="/assets/js/158.151221ae.js"><link rel="prefetch" href="/assets/js/159.ef6d7ffe.js"><link rel="prefetch" href="/assets/js/16.1793aef7.js"><link rel="prefetch" href="/assets/js/160.de54c4ea.js"><link rel="prefetch" href="/assets/js/161.24d4e57c.js"><link rel="prefetch" href="/assets/js/162.632032fe.js"><link rel="prefetch" href="/assets/js/163.fd01cd99.js"><link rel="prefetch" href="/assets/js/164.45f203f5.js"><link rel="prefetch" href="/assets/js/165.aafe4fe1.js"><link rel="prefetch" href="/assets/js/166.1dd1d21c.js"><link rel="prefetch" href="/assets/js/167.5501b3a1.js"><link rel="prefetch" href="/assets/js/168.fbe58b1f.js"><link rel="prefetch" href="/assets/js/169.2cae7f5e.js"><link rel="prefetch" href="/assets/js/17.bbfe63f2.js"><link rel="prefetch" href="/assets/js/170.265f7c9e.js"><link rel="prefetch" href="/assets/js/171.b61f327d.js"><link rel="prefetch" href="/assets/js/172.5d0043fd.js"><link rel="prefetch" href="/assets/js/173.45284bb6.js"><link rel="prefetch" href="/assets/js/174.9130e0c4.js"><link rel="prefetch" href="/assets/js/175.2b38bddd.js"><link rel="prefetch" href="/assets/js/176.9772cf09.js"><link rel="prefetch" href="/assets/js/177.69048ebc.js"><link rel="prefetch" href="/assets/js/178.e10d7ce5.js"><link rel="prefetch" href="/assets/js/179.3789edc0.js"><link rel="prefetch" href="/assets/js/18.0807ded0.js"><link rel="prefetch" href="/assets/js/180.ab675e47.js"><link rel="prefetch" href="/assets/js/181.2e39eff0.js"><link rel="prefetch" href="/assets/js/19.becf5a76.js"><link rel="prefetch" href="/assets/js/2.eb089a4f.js"><link rel="prefetch" href="/assets/js/20.cea59652.js"><link rel="prefetch" href="/assets/js/21.58c43ff1.js"><link rel="prefetch" href="/assets/js/22.f73b825d.js"><link rel="prefetch" href="/assets/js/23.43b13730.js"><link rel="prefetch" href="/assets/js/24.f77f93ca.js"><link rel="prefetch" href="/assets/js/25.7dfaf3fb.js"><link rel="prefetch" href="/assets/js/26.629d28e5.js"><link rel="prefetch" href="/assets/js/27.4fff23ea.js"><link rel="prefetch" href="/assets/js/28.1b8ae389.js"><link rel="prefetch" href="/assets/js/29.d5cce9a0.js"><link rel="prefetch" href="/assets/js/30.961d5519.js"><link rel="prefetch" href="/assets/js/31.121dd1af.js"><link rel="prefetch" href="/assets/js/32.4a3c5df7.js"><link rel="prefetch" href="/assets/js/33.5537f44b.js"><link rel="prefetch" href="/assets/js/34.1d4d4653.js"><link rel="prefetch" href="/assets/js/35.d094209b.js"><link rel="prefetch" href="/assets/js/36.832660c5.js"><link rel="prefetch" href="/assets/js/37.145c3665.js"><link rel="prefetch" href="/assets/js/38.4f369bfe.js"><link rel="prefetch" href="/assets/js/39.ba060044.js"><link rel="prefetch" href="/assets/js/4.66d742f6.js"><link rel="prefetch" href="/assets/js/40.e50e0379.js"><link rel="prefetch" href="/assets/js/41.4ed7617c.js"><link rel="prefetch" href="/assets/js/43.d22b74c4.js"><link rel="prefetch" href="/assets/js/44.59439f9d.js"><link rel="prefetch" href="/assets/js/45.da28bc46.js"><link rel="prefetch" href="/assets/js/46.b8db1176.js"><link rel="prefetch" href="/assets/js/47.7ed16fc7.js"><link rel="prefetch" href="/assets/js/48.c982d5ed.js"><link rel="prefetch" href="/assets/js/49.a7579f55.js"><link rel="prefetch" href="/assets/js/5.08802d7d.js"><link rel="prefetch" href="/assets/js/50.103b5bf6.js"><link rel="prefetch" href="/assets/js/51.0fe9d79a.js"><link rel="prefetch" href="/assets/js/52.9ba31e26.js"><link rel="prefetch" href="/assets/js/53.0e8bc1f0.js"><link rel="prefetch" href="/assets/js/54.9566e517.js"><link rel="prefetch" href="/assets/js/55.a124abae.js"><link rel="prefetch" href="/assets/js/56.d9cf0800.js"><link rel="prefetch" href="/assets/js/57.93599da0.js"><link rel="prefetch" href="/assets/js/58.d943f85b.js"><link rel="prefetch" href="/assets/js/59.50a66488.js"><link rel="prefetch" href="/assets/js/6.a3ea60eb.js"><link rel="prefetch" href="/assets/js/60.21aa3aa3.js"><link rel="prefetch" href="/assets/js/61.6712c00f.js"><link rel="prefetch" href="/assets/js/62.eff3e4b1.js"><link rel="prefetch" href="/assets/js/63.09701d5a.js"><link rel="prefetch" href="/assets/js/64.eb440dec.js"><link rel="prefetch" href="/assets/js/65.aeed0579.js"><link rel="prefetch" href="/assets/js/66.97244c64.js"><link rel="prefetch" href="/assets/js/67.e01c5c24.js"><link rel="prefetch" href="/assets/js/68.21be91ba.js"><link rel="prefetch" href="/assets/js/69.c0849905.js"><link rel="prefetch" href="/assets/js/7.7fd40e91.js"><link rel="prefetch" href="/assets/js/70.b32bbe5d.js"><link rel="prefetch" href="/assets/js/71.0efbc0c7.js"><link rel="prefetch" href="/assets/js/72.ef963181.js"><link rel="prefetch" href="/assets/js/73.ca7dd5db.js"><link rel="prefetch" href="/assets/js/74.4483ede8.js"><link rel="prefetch" href="/assets/js/75.374ab483.js"><link rel="prefetch" href="/assets/js/76.b4a39f08.js"><link rel="prefetch" href="/assets/js/77.6b30c3cd.js"><link rel="prefetch" href="/assets/js/78.15376c33.js"><link rel="prefetch" href="/assets/js/79.3153fcec.js"><link rel="prefetch" href="/assets/js/80.9a88c684.js"><link rel="prefetch" href="/assets/js/81.1e3f842c.js"><link rel="prefetch" href="/assets/js/82.996dbd3d.js"><link rel="prefetch" href="/assets/js/83.955158bf.js"><link rel="prefetch" href="/assets/js/84.71bdc76d.js"><link rel="prefetch" href="/assets/js/85.774e49f2.js"><link rel="prefetch" href="/assets/js/86.bebf32e5.js"><link rel="prefetch" href="/assets/js/87.becdbde1.js"><link rel="prefetch" href="/assets/js/88.49e933f4.js"><link rel="prefetch" href="/assets/js/89.eeceedfd.js"><link rel="prefetch" href="/assets/js/90.3ea6dd12.js"><link rel="prefetch" href="/assets/js/91.62a6a556.js"><link rel="prefetch" href="/assets/js/92.e2ebb8f5.js"><link rel="prefetch" href="/assets/js/93.dcdefe7a.js"><link rel="prefetch" href="/assets/js/94.bf412146.js"><link rel="prefetch" href="/assets/js/95.8deadcdc.js"><link rel="prefetch" href="/assets/js/96.9977087a.js"><link rel="prefetch" href="/assets/js/97.6591f9da.js"><link rel="prefetch" href="/assets/js/98.4db7f75e.js"><link rel="prefetch" href="/assets/js/99.a61462e9.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.2852b102.js"> <link rel="stylesheet" href="/assets/css/0.styles.146197cf.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" width="50" height="50" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://p3-passport.byteacctimg.com/img/user-avatar/794fdae4ff249d532da19a3c26d420ed~300x300.image" alt="aiyoudiao" class="logo"> <span class="site-name can-hide">
      aiyoudiao
    </span></a> <div class="links"><div class="sky-switch" data-v-3a03d589><label for="toggle" data-v-3a03d589><input id="toggle" type="checkbox" data-v-3a03d589><div data-v-3a03d589></div></label></div> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/img/mar.jpg"> <div class="blogger-info"><h3>码二</h3> <span>扫微信二维码，认识一下码二吧😉。</span></div></div> <nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>react</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>16_4</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/18114480448/" class="sidebar-link">React16_4整理-开篇</a></li><li><a href="/pages/78144320432/" class="sidebar-link">React16_4整理-TodoList</a></li><li><a href="/pages/7981309049/" class="sidebar-link">React16_4整理-上阶</a></li><li><a href="/pages/4241004044/" aria-current="page" class="active sidebar-link">React16_4整理-Redux开篇</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/4241004044/#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#redux-概念简述" class="sidebar-link">Redux 概念简述</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#redux-的工作流程" class="sidebar-link">Redux 的工作流程</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#使用-antd-编写-todolist-页面布局" class="sidebar-link">使用 antd 编写 TodoList 页面布局</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#创建-redux-中的-store" class="sidebar-link">创建 redux 中的 store</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#action-和-reducer-的编写" class="sidebar-link">Action 和 Reducer 的编写</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#使用-redux-完成-todolist-删除功能" class="sidebar-link">使用 Redux 完成 TodoList 删除功能</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#actiontypes-的拆分" class="sidebar-link">ActionTypes 的拆分</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#使用-actioncreator-统一创建-action" class="sidebar-link">使用 actionCreator 统一创建 action</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#总结" class="sidebar-link">总结</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/4241004044/#reducer-必须是纯函数" class="sidebar-link">Reducer 必须是纯函数</a></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#redux-中核心的-api" class="sidebar-link">Redux 中核心的 API</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/4241004044/#拓展" class="sidebar-link">拓展</a></li></ul></li><li><a href="/pages/2765901041/" class="sidebar-link">React16_4整理-Redux上阶</a></li><li><a href="/pages/53933290429/" class="sidebar-link">React16_4整理-实战</a></li></ul></section></li><li><a href="/pages/2541802042/" class="sidebar-link">react心得</a></li><li><a href="/pages/56216400440/" class="sidebar-link">react设计的哲学</a></li><li><a href="/pages/64353330433/" class="sidebar-link">react上手知识点(上篇)</a></li><li><a href="/pages/67517390439/" class="sidebar-link">react上手知识点(下篇)</a></li><li><a href="/pages/21029430543/" class="sidebar-link">antd</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>低代码</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>读书会</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>线性代数</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>docker</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>auto</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>杂记</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"> <div class="theme-vdoing-wrapper bg-style-1"><div class="articleInfo-wrap" data-v-18fb2c02><div class="articleInfo" data-v-18fb2c02><ul class="breadcrumbs" data-v-18fb2c02><li data-v-18fb2c02><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-18fb2c02></a></li> <li data-v-18fb2c02><a href="/categories/?category=%E7%AC%94%E8%AE%B0" title="分类" data-v-18fb2c02>
          笔记
        </a></li> <li data-v-18fb2c02><a href="/categories/?category=react" title="分类" data-v-18fb2c02>
          react
        </a></li> <li data-v-18fb2c02><a href="/categories/?category=16_4" title="分类" data-v-18fb2c02>16_4</a></li></ul> <div class="info" data-v-18fb2c02><div title="作者" class="author iconfont icon-touxiang" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>aiyoudiao</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>2022-04-13</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><!----> <span>
            04.React16_4整理-Redux开篇.md
          </span></h1> <div class="theme-vdoing-content content__default"><h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>React 默认没带数据流（状态管理），那些实现了数据流的库不光可以在react中使用，也可以在vue中使用。<br>
在react中flux叫rflux，flux中有多个store。<br>
redux与flux不同，它只有一个单一的store。整个应用的state存储在一个单一的store树中。<br>
mbox是一个状态管理机制，是全自动的，action一改变state，views上就直接发生变化，不需要你像redux一样去写reducer函数了。</p> <p>这篇文章主要讲的是redux相关的内容，其它的状态管理库，实现的功能都是一样的，只是使用起来不同，但思想大同小异。学会一个，其它看看官网了就理解了。</p> <h2 id="redux-概念简述"><a href="#redux-概念简述" class="header-anchor">#</a> Redux 概念简述</h2> <p>React 是一个简单的轻量级的视图层的框架，内置的组件（同级的组件）传值太麻烦了，而且它需要依赖很多的框架才能去实现大项目的构建。<br>
如果你想使用 React 去做一个大的应用，必须使用一个配套的数据层的框架来结合使用才行，这个数据层的框架可以是 Redux。<br>
将组件中的数据存储到一个公共的区域，其它组件需要数据的话，直接到这个公共的存储区域中拿一下即可。<br> <code>Redux=Reducer+Flux</code>，Flux 是 13 年开源的时候 FaceBook 放出来和 React 一起使用的数据层框架。Flux 不好用，有人把 Flux 做了一个升级，升级之后就叫 Redux。</p> <h2 id="redux-的工作流程"><a href="#redux-的工作流程" class="header-anchor">#</a> Redux 的工作流程</h2> <p><code>ReactComponent</code> 、<code>ActionCreators</code>、<code>Strore</code>、<code>Reducers</code></p> <ol><li><code>ReactComponent</code>：借书的人</li> <li><code>ActionCreators</code>：借书时说的话</li> <li><code>Strore</code>：图书馆的管理员</li> <li><code>Reducers</code>：图书记录本</li></ol> <p>Redux 的工作流程：</p> <ol><li>首先 <code>ReactComponent</code> 创建一个<code>ActionCreator</code>命令</li> <li>通过<code>ActionCreator</code>命令向<code>Strore</code>发起请求</li> <li><code>Strore</code>接收到请求后去<code>Reducers</code>查询对应的数据</li> <li>从<code>Reducers</code>查询到对应的数据查询后由<code>Strore</code>将对应的数据返回给<code>ReactComponent</code></li></ol> <h2 id="使用-antd-编写-todolist-页面布局"><a href="#使用-antd-编写-todolist-页面布局" class="header-anchor">#</a> 使用 antd 编写 TodoList 页面布局</h2> <p><strong>安装 antd</strong></p> <p>使用命令：<code>npm install antd --save</code> 或者 <code>yarn add antd</code><br>
使用 <code>antd</code>，<code>引入组件</code>，<code>引入css</code>，<code>直接使用组件</code>即可，可以<code>去官网找对应的组件</code>，<code>复制代码</code>简单使<code>用一下</code>。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Input <span class="token punctuation">,</span>Button<span class="token punctuation">,</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'../node_modules/antd/dist/antd.css'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token string">'Racing car sprays burning fuel into crowd.'</span><span class="token punctuation">,</span>
    <span class="token string">'Japanese princess to wed commoner.'</span><span class="token punctuation">,</span>
    <span class="token string">'Australian walks 100km after outback crash.'</span><span class="token punctuation">,</span>
    <span class="token string">'Man charged over missing wedding girl.'</span><span class="token punctuation">,</span>
    <span class="token string">'Los Angeles battles huge wildfires.'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">TodoList</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span><span class="token punctuation">(</span>
            <span class="token operator">&lt;</span>div style <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>margin<span class="token operator">:</span> <span class="token string">'10px 0px 0px 10px'</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token string">&quot;500px&quot;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                &lt;Input placeholder = &quot;请输入内容&quot;  style = </span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginRight<span class="token operator">:</span> <span class="token string">'10px'</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token string">&quot;350px&quot;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">/&gt;
                &lt;Button type = &quot;primary&quot; style = </span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token string">&quot;120px&quot;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">&gt;Primary</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                &lt;List
                    bordered
                    dataSource = </span><span class="token punctuation">{</span>data<span class="token punctuation">}</span><span class="token plain-text">
                    style = </span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token string">'350px'</span><span class="token punctuation">,</span> marginTop<span class="token operator">:</span> <span class="token string">'10px'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">
                    renderItem = </span><span class="token punctuation">{</span>item <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List.Item</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">List.Item</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
                    /&gt;
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>它常用于开发后台，可以用它开发出很漂亮的后台页面</p> <h2 id="创建-redux-中的-store"><a href="#创建-redux-中的-store" class="header-anchor">#</a> 创建 redux 中的 store</h2> <p>首先安装 <code>redux</code>：<code>yarn add redux</code> 或者 <code>npm i redux --save</code><br>
新建一个<code>store</code>文件夹，新建一个<code>index.js</code>和<code>redcer.js</code></p> <p><strong>index.js 图书管理员</strong></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducer'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store<span class="token punctuation">;</span>
</code></pre></div><p><strong>redcer.js 图书记录本</strong></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">const</span> defaultState <span class="token operator">=</span> <span class="token punctuation">{</span>
    list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">123</span><span class="token punctuation">,</span><span class="token number">321</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    inputValue<span class="token operator">:</span> <span class="token string">'789'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span>state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span>action<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// state中存放的是整个图书馆中存放的书籍的信息</span>
    <span class="token keyword">return</span> state<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>需要<code>用的时候</code>直接<code>引</code>入这个<code>index.js</code>，然后通过<code>对象.getState()</code>方法，就能够<code>获取</code>到<code>store</code>中的<code>内容</code>了,之后你就可以<code>直接</code>使<code>用数据</code>了。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">//import store from './store/index.js'</span>
<span class="token comment">// 简写成这样也可以</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store'</span><span class="token punctuation">;</span>

<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>引入 <code>store</code> ，直接通过<code>store</code>来<code>获取</code>数据或者<code>修改</code>数据，<code>store</code>是一个<code>公共的数据层对象</code>。</p> <h2 id="action-和-reducer-的编写"><a href="#action-和-reducer-的编写" class="header-anchor">#</a> Action 和 Reducer 的编写</h2> <p>安装谷歌浏览器插件：<code>Redux DevTools</code></p> <p>使用浏览器开发人员工具点击选项卡 <code>Redux</code><br>
如果你没有配置，那么你就将  <code>window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()</code>  粘贴到<code>createStore(reducer)</code>的第二个参数中去</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code>    <span class="token keyword">const</span> store<span class="token operator">=</span><span class="token function">createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">,</span> window<span class="token punctuation">.</span>__REDUX_DEVTOOLS_EXTENSION__ <span class="token operator">&amp;&amp;</span> window<span class="token punctuation">.</span><span class="token function">__REDUX_DEVTOOLS_EXTENSION__</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><code>__REDUX_DEVTOOLS_EXTENSION__</code>也是<code>Redux</code>的一个<code>中间件</code>。</p> <p><code>深拷贝</code>一个<code>对象</code>：<code>JSON.parse(JSON.stringify(obj))</code>;<br>
首先创建一个 <code>store</code>对象并且传递一个<code>reducer</code>对象进去<br> <code>reducer</code>实际上一个函数，<code>store</code>在创建的时候将这个函数传递进去了</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">const</span> defaultState <span class="token operator">=</span> <span class="token punctuation">{</span>
    list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">123</span><span class="token punctuation">,</span><span class="token number">321</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    inputValue<span class="token operator">:</span> <span class="token string">'789'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span>state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span> action<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 根据行动指令执行对应的操作</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;changeInputValue&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// reducer 只能够获取state里面的值 绝对不能修改里面的值</span>
        <span class="token keyword">const</span> newState <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        newState<span class="token punctuation">.</span>inputValue <span class="token operator">=</span> action<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
        <span class="token keyword">return</span> newState<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;addListItem&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> newState <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        newState<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>newState<span class="token punctuation">.</span>inputValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
        newState<span class="token punctuation">.</span>inputValue <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> newState<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// state中存放的是整个图书馆中存放的书籍的信息</span>
    <span class="token keyword">return</span> state<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>当<code>store</code>进行<code>dispatch</code>方法调度的时候就会去执行<code>reducer</code>了</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token function">handleChange</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> action <span class="token operator">=</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">&quot;changeInputValue&quot;</span><span class="token punctuation">,</span>
        value<span class="token operator">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value
    <span class="token punctuation">}</span>
    store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span>action<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>执行<code>reducer</code>会对全局的<code>state</code>进行修改</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">// 根据行动指令执行对应的操作</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;changeInputValue&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// reducer 只能够获取state里面的值 绝对不能修改里面的值</span>
    <span class="token keyword">const</span> newState <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    newState<span class="token punctuation">.</span>inputValue <span class="token operator">=</span> action<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    <span class="token keyword">return</span> newState<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>你可以通过<code>store.getState()</code>来获取全局的<code>state</code>对象</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>你可以通过<code>store.subscribe</code>来进行监听全局 store 的改变，传递进去的回调函数中你可以调用<code>this.setState()</code>来让页面的组件<code>重新渲染</code></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">this</span><span class="token punctuation">.</span>handleStoreChange <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleStoreChange</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 监听 store中的状态改变</span>
store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleStoreChange<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">handleStoreChange</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;store changed&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>最后就达到了使用 redux 中 store 里的全局状态进行传值的目的了。</p> <h2 id="使用-redux-完成-todolist-删除功能"><a href="#使用-redux-完成-todolist-删除功能" class="header-anchor">#</a> 使用 Redux 完成 TodoList 删除功能</h2> <p>遍历生成 item 的时候，绑定事件并传递对应的下标，通过 distach 方法进行指令的传递，reducer 中根据执行进行全局状态的间接更改，最后组件中监听全局状态的方法里调用 this.setState(store.getState())重新渲染组件。</p> <h2 id="actiontypes-的拆分"><a href="#actiontypes-的拆分" class="header-anchor">#</a> ActionTypes 的拆分</h2> <p>为了防止的你 action.type 中的字符串写错，你可以定义一个常量与对应的字符串相对应，这样相当于定义了一个规范，不仅利于编写，也利于排错。<br>
你创建一个单独的文件，里面存放这些字符串对应的常量，页面中也可以引入这个文件，reducer 中也可以引入这个文件。<br>
这样一来，你不用担心页面或者 reducer 中的字符串写错了而导致无法达到预期的效果了。</p> <h2 id="使用-actioncreator-统一创建-action"><a href="#使用-actioncreator-统一创建-action" class="header-anchor">#</a> 使用 actionCreator 统一创建 action</h2> <p>将所有的 action 进行统一的管理，这么做的好处是分层，这样利于管理，可以提高代码的可维护性，很像三层架构中<code>模型层</code>、<code>数据访问层</code>、<code>业务逻辑层</code>里的<code>数据访问层</code>。</p> <p>这样一想，UI 组件就是 UI 层，容器组件就是业务逻辑层，模型层和数据访问层就是<code>Redux</code>中的<code>reducer</code>、<code>store</code>、<code>actionCretor</code>（就像<code>EntityFrameWork</code>通过<code>linq</code>来操作数据库一样）。</p> <p>并且做自动化测试的时候也会很方便。使用方法来进行管理，每一个<code>action</code>对应一个方法，页面组件只需要调用对应的方法传递数据即可，将对应的指令封装到方法中了，你可以调用方法返回指令，也可以直接在那个方法中直接调用<code>store.disptach(指令)</code>。</p> <p><code>React</code>中 <code>数据与视图分离</code>，但是<code>JS逻辑和视图</code>是<code>混在一起</code>的。</p> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p><code>store</code> 是唯一的，在 store 文件夹下的 index.js 文件被创建，全局共享一个，这里面使用一个单例模式。</p> <p>只有 store 能够改变自己的内容，不要在<code>reducer.js</code>中去改变<code>state</code>，你<code>只能深度克隆state</code>，然后<code>修改</code>你<code>newState</code>后再<code>return newState</code>，这时候<code>store</code>接<code>收到</code>你的<code>返回</code>的<code>newState</code>之后就<code>会</code>去<code>改变</code>自己的<code>state</code>了。这是一个规范，就是这么定的。</p> <h3 id="reducer-必须是纯函数"><a href="#reducer-必须是纯函数" class="header-anchor">#</a> Reducer 必须是纯函数</h3> <p>纯函数指的是，给定固定的输入，就一定会有固定的输出，而且不会有任何副作用。<br>
也就是给定<code>state</code>和<code>action</code>就会返回<code>newState</code>，但是<code>newState</code>中的属性，是根据<code>state</code>和<code>action</code>来进行确定的，不会受到其它的影响也不能受到其它的影响，如果受到了就不是纯函数了。<br>
只要一个函数中存在 与<code>日期相关</code>的函数或者有<code>setTimeOut</code>就<code>不再是</code>一个<code>纯函数</code>了，因为这些会让这个函数受到其它的影响，不再是固定的输入就有固定的输出。<br>
Reducer 里面不能有异步的操作和与时间相关的操作，对方法传递进来的参数直接做修改就是<code>副作用</code>，<code>Reducer</code>中<code>不允许</code>有<code>副作用</code>。</p> <h3 id="redux-中核心的-api"><a href="#redux-中核心的-api" class="header-anchor">#</a> Redux 中核心的 API</h3> <p><code>createStore</code> 用来创建 <code>store</code><br> <code>store.dispatch</code>用来派发<code>action</code>，<code>store</code>会接收这个<code>action</code>，并且根据它来进行<code>state</code>的改变<br> <code>store.getState</code> 获取<code>store</code>中的<code>state</code><br> <code>store.subscribe</code> 用来监听<code>store中state</code>的变化</p> <p>只要<code>store</code>发生改变，就会触发<code>subscribe</code>中的<code>回调</code>函数</p> <h2 id="拓展"><a href="#拓展" class="header-anchor">#</a> 拓展</h2> <p>以上已经把redux的基础使用做了一下了解，那么简单拓展一下flux和mbox的设计思想。</p> <p><strong>flux</strong></p> <p>UI产生动作消息，将动作传递给分发器。（这个动作就是 比如 点击一个按钮或者ajax返回数据）
分发器广播给所有store。（以广播的方式告诉所有store。）
订阅的store做出反应，传递新的state给UI。<br>
在react中flux叫rflux，flux中有多个store。</p> <p><strong>redux</strong></p> <p>redux与flux不同，它只有一个单一的store。整个应用的state存储在一个单一的store树中。<br>
state状态为只读，你不能直接修改state，应该要通过action触发state修改。<br>
得使用纯函数进行状态修改，需要你写reducers纯函数来进行处理，reducer通过当前状态树和action来进行计算，返回一个新的state。（这个reducer可以当它是一个merge函数，merge完了之后返回一个新的state来更新掉那个旧的。）<br>
不过如果一个应用的state都存到一个store中，那么效率就会很低，于是它提出了一个分支的概念，不同的state放到不同的分支上。</p> <p>redux：<a href="https://react-redux.js.org/" target="_blank" rel="noopener noreferrer">https://react-redux.js.org/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>flux 和 redux不同</strong></p> <p>flux和redux都可以作为react的状态管理，flux是多store，redux是单store。<br>
flux有调度器来进行事件处理，redux依赖reducer来实现事件处理。<br>
flux的state可以直接修改，redux 的state不能直接修改，要通过reducer进行state的merge方式来产生一个新的state。</p> <p><strong>mbox</strong></p> <p>mbox是一个状态管理机制，是全自动的，action一改变state，views上就直接发生变化，不需要你像redux一样去写reducer函数了。<br>
定义状态并使其可观察，使用修饰符@observer来使其可观察。<br>
创建视图以响应状态变化。<br>
更改状态（自动响应UI变化）。</p> <p>mobx：<a href="https://cn.mobx.js.org/" target="_blank" rel="noopener noreferrer">https://cn.mobx.js.org/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div></div> <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=react" title="标签">#react</a><a href="/tags/?tag=redux" title="标签">#redux</a></div> <div class="last-updated"><span class="prefix">上次更新时间:</span> <span class="time">10年18月2023日 01时57分53秒</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/7981309049/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">React16_4整理-上阶</div></a> <a href="/pages/2765901041/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">React16_4整理-Redux上阶</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/7981309049/" class="prev">React16_4整理-上阶</a></span> <span class="next"><a href="/pages/2765901041/"> React16_4整理-Redux上阶 </a>
        →
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/45343271027/"><div>01.数据结构导论一览.md</div></a> <span>10-16</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/38850370637/"><div>30.2023年06月04日.md</div></a> <span>06-04</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/74707370537/"><div>08.与测量相关.md</div></a> <span>05-06</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div> </main></div> <div class="footer"><!----> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2017-2023
    <span class="link">aiyoudiao 码二</span> <span>备案号：</span> <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" title="备案号">鄂ICP备2022002654号-1</a></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div><APlayer audio="" fixed="true" theme="#b7daff" loop="loop" order="list" preload="auto" volume="0.7" mutex="true" lrc-type="3" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer><div id="VuepressPluginLive2d"></div></div></div>
    <script src="/assets/js/app.bd2fbc77.js" defer></script><script src="/assets/js/3.72c9c947.js" defer></script><script src="/assets/js/113.4e908557.js" defer></script><script src="/assets/js/42.4251ca36.js" defer></script>
  </body>
</html>
